<template>
  <div>
     <h1>vuex的第二种用法</h1>
     <h1>{{ssname}}</h1>
     <h1>使用注入的state:{{token}}</h1>
     <h1>{{count}}</h1>
     <hr>
     <h1>使用注入的getters:{{counts}}</h1>
      <h1>使用注入的getters:{{cartnum}}</h1>
      <h1>使用注入的getters:{{tokens}}</h1>
      <hr>
      <button @click="setToken('asfasdfsaf')">调用vuex中的setToken</button>
      <button @click="del">删除token</button>
      <hr>
      <button @click="actToken('666999')">调用actions方法</button>
  </div>
</template>
<script>
// vuex的辅助函数用法 
// 辅助函数用法 是通过mapState和mapGetters 方法
// 来将 state和getters的数据 注入到本组件的computed中
// 当做本组件的 计算属性使用

// 辅助函数 mapMutations和mapActions 的方法 将vuex中的mutations和actions 注入到本组件的methods中使用

// npm i 插件名  --save (简写-S)  // 生产依赖 上线需要的
// npm i 插件名  --save-dev (简写-D) //开发依赖 开发需要-

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'


export default {
  data(){
    return {
      name:"王"
    }
  },
  methods:{
    // 将vuex中的mutations注入本组件的methods中使用
    ...mapMutations(["setToken","removeToken"]),
    // 将Vuex中的actions注入本组件的methods中使用
    ...mapActions(["actToken"]),
    del(){ //调用注入进来的mutations方法
       this.removeToken();
    }
  },
   computed:{ //计算属性
    // 将vuex中的state注入本组件的计算属性使用
    ...mapState(["token","count"]),
    ...mapGetters(["counts","tokens","cartnum"]),
     ssname(){ //原组件的计算属性
       return this.name+"德发"
     }
   },
   mounted(){
    console.log(this.token,"-------")
   }
}
</script>
